<template>
  <div class="app-container">
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1">
        <template slot="title">
          <MmvTitle title="订单信息"></MmvTitle>
        </template>

        <el-descriptions class="margin-top margin-bottom" :column="3" border>
          <el-descriptions-item label-class-name="my-descriptions-label" >
            <template slot="label"> 订单编号</template>
            {{ detail.orderInfo.orderNo }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-descriptions-label" >
            <template slot="label"> 订单状态</template>
            <dict-tag :options="dict.type.sys_order_status" :value="detail.orderInfo.orderStatus"/>
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-descriptions-label" >
            <template slot="label"> 取车类型</template>
            {{ {1: '到店取还车', 3: '上门送取车', 4: '上门送车', 5: '上门取车',}[Number(detail.orderInfo.rentalType)] }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-descriptions-label" >
            <template slot="label"> 预约取车时间</template>
            {{ detail.orderInfo.rentalStartTime }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-descriptions-label" >
            <template slot="label"> 预约还车时间</template>
            {{ detail.orderInfo.rentalEndTime }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-descriptions-label" >
            <template slot="label"> 预约租期（天）</template>
            {{ detail.orderInfo.leaseDays }}
          </el-descriptions-item>

          <template v-if="detail.orderInfo.orderStatus>3&&detail.orderInfo.orderStatus<10">
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label"> 实际取车时间</template>
              {{ detail.orderInfo.actualStartTime }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label"> 实际还车时间</template>
              {{ detail.orderInfo.actualEndTime }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label"> 实际租期（天）</template>
              {{ detail.orderInfo.actualLeaseDays }}
            </el-descriptions-item>
          </template>

          <el-descriptions-item label-class-name="my-descriptions-label"  span="3" v-if="detail.orderInfo.rentalType==3||detail.orderInfo.rentalType==4">
            <template slot="label"> 预约取车地址</template>
            {{ detail.orderInfo.takeAddress }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-descriptions-label"  span="3" v-if="detail.orderInfo.rentalType==3||detail.orderInfo.rentalType==5">
            <template slot="label"> 预约还车地址</template>
            {{ detail.orderInfo.alsoAddress }}
          </el-descriptions-item>

          <el-descriptions-item label-class-name="my-descriptions-label" >
            <template slot="label"> 预约取车门店</template>
            {{ detail.orderInfo.reserveTakeStoreName }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-descriptions-label" >
            <template slot="label"> 预约还车门店</template>
            {{ detail.orderInfo.reserveAlsoStoreName }}
          </el-descriptions-item>
          <el-descriptions-item label-class-name="my-descriptions-label" >
            <template slot="label"> 预定车型</template>
            {{ detail.orderInfo.modelName }}
          </el-descriptions-item>


          <template v-if="detail.orderInfo.orderStatus>3&&detail.orderInfo.orderStatus<10">
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label"> 实际取车门店</template>
              {{ detail.orderInfo.takeStoreName }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label"> 实际还车门店</template>
              {{ detail.orderInfo.orderStatus > 4 ? detail.orderInfo.alsoStoreName : "" }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label"> 实际车型</template>
              {{ detail.orderInfo.actualModelName }}
            </el-descriptions-item>
          </template>
        </el-descriptions>
      </el-collapse-item>
<!--      <el-collapse-item name="2">-->
<!--        <template slot="title">-->
<!--          <MmvTitle title="预付费"></MmvTitle>-->
<!--        </template>-->

<!--        <el-table :data="detail.chargingItems" :span-method="objectSpanMethod" border-->
<!--                  style="width: 100%; margin-top: 20px">-->
<!--          <el-table-column _min-width="200" label="费用名称" align="center" prop="name"/>-->
<!--          <el-table-column _min-width="200" label="收费项目名称" align="center" prop="chargeProjectName"/>-->
<!--          <el-table-column _min-width="200" label="数量" align="center" prop="number"/>-->
<!--          <el-table-column _min-width="160" label="收费类型" align="center" prop="chargeItemsType">-->
<!--            <template slot-scope="{row}">-->
<!--              <dict-tag :options="dict.type.charge_type" :value="row.chargeItemsType"/>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column _min-width="200" label="单价" align="center" prop="unitPrice"/>-->
<!--          <el-table-column _min-width="200" label="收费金额" align="center" prop="chargeMoney"/>-->
<!--          <el-table-column _min-width="160" label="支付方式" align="center" prop="payType">-->
<!--            <template slot-scope="{row}">-->
<!--              <dict-tag :options="dict.type.sys_pay_type" :value="row.payType"/>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column _min-width="160" label="支付状态" align="center" prop="payStatus">-->
<!--            <template slot-scope="{row}">-->
<!--              <dict-tag :options="dict.type.order_payStatus" :value="row.payStatus"/>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--      </el-collapse-item>-->
      <el-collapse-item name="3">
        <template slot="title">
          <MmvTitle title="客户信息"></MmvTitle>
        </template>
        <MemberDetail :detail="detail.customerInfo"></MemberDetail>

<!--        <el-descriptions class="margin-top margin-bottom" :column="2" border>-->
<!--          <el-descriptions-item label-class-name="my-descriptions-label" >-->
<!--            <template slot="label"> 客户类型</template>-->
<!--            {{ detail.customerInfo.memberType|memberType }}-->
<!--          </el-descriptions-item>-->
<!--          <el-descriptions-item label-class-name="my-descriptions-label" >-->
<!--            <template slot="label"> 客户名称</template>-->
<!--            {{ detail.customerInfo.memberName || '&#45;&#45;' }}-->
<!--          </el-descriptions-item>-->
<!--          <el-descriptions-item label-class-name="my-descriptions-label" >-->
<!--            <template slot="label"> 客户来源</template>-->
<!--            {{ detail.customerInfo.memberSource|memberSource }}-->
<!--          </el-descriptions-item>-->
<!--          <el-descriptions-item label-class-name="my-descriptions-label" >-->
<!--            <template slot="label"> 联系方式</template>-->
<!--            {{ detail.customerInfo.contactPhone || '&#45;&#45;' }}-->
<!--          </el-descriptions-item>-->
<!--          <el-descriptions-item label-class-name="my-descriptions-label"  span="2">-->
<!--            <template slot="label"> 联系地址</template>-->
<!--            {{ detail.customerInfo.contactAddress || '&#45;&#45;' }}-->
<!--          </el-descriptions-item>-->
<!--          <el-descriptions-item label-class-name="my-descriptions-label" >-->
<!--            <template slot="label"> 证件号码</template>-->
<!--            {{ detail.customerInfo.cardId || '&#45;&#45;' }}-->
<!--          </el-descriptions-item>-->
<!--          <el-descriptions-item label-class-name="my-descriptions-label" >-->
<!--            <template slot="label"> 失效日期</template>-->
<!--            {{ detail.customerInfo.cardValidity || '&#45;&#45;' }}-->
<!--          </el-descriptions-item>-->
<!--          <el-descriptions-item label-class-name="my-descriptions-label"  span="2">-->
<!--            <template slot="label"> 证件正反面</template>-->
<!--            <template v-for="item in detail.customerInfo.sfUrl">-->
<!--              <el-image :key="item" :src="item|imageUrl" :preview-src-list="[$mmvImageUrl(item)]" fit="cover"-->
<!--                        style="width:160px;height:90px;margin-right:15px;"></el-image>-->
<!--            </template>-->
<!--          </el-descriptions-item>-->
<!--          <el-descriptions-item label-class-name="my-descriptions-label" >-->
<!--            <template slot="label"> 驾驶证类型</template>-->
<!--            {{ detail.customerInfo.drivingType || '&#45;&#45;' }}-->
<!--          </el-descriptions-item>-->
<!--          <el-descriptions-item label-class-name="my-descriptions-label" >-->
<!--            <template slot="label"> 失效日期</template>-->
<!--            {{ detail.customerInfo.drivingValidity || '&#45;&#45;' }}-->
<!--          </el-descriptions-item>-->
<!--          <el-descriptions-item label-class-name="my-descriptions-label" >-->
<!--            <template slot="label"> 驾驶证正副页</template>-->
<!--            <template v-for="item in detail.customerInfo.jsUrl">-->
<!--              <el-image :key="item" :src="item|imageUrl" :preview-src-list="[$mmvImageUrl(item)]" fit="cover"-->
<!--                        style="width:160px;height:90px;margin-right:15px;"></el-image>-->
<!--            </template>-->
<!--          </el-descriptions-item>-->
<!--          <el-descriptions-item label-class-name="my-descriptions-label"  v-if="detail.customerInfo.creditCode">-->
<!--            <template slot="label"> 统一社会信用代码</template>-->
<!--            {{ detail.customerInfo.creditCode || '&#45;&#45;' }}-->
<!--          </el-descriptions-item>-->
<!--          <el-descriptions-item label-class-name="my-descriptions-label"  v-if="detail.customerInfo.businessLicenseUrl">-->
<!--            <template slot="label"> 营业执照</template>-->
<!--            <el-image :src="detail.customerInfo.businessLicenseUrl|imageUrl" :preview-src-list="[$mmvImageUrl(item)]"-->
<!--                      style="width:160px;height:90px;margin-right:15px;"></el-image>-->
<!--          </el-descriptions-item>-->
<!--        </el-descriptions>-->
      </el-collapse-item>
      <el-collapse-item name="4">
        <template slot="title">
          <MmvTitle title="违约信息"></MmvTitle>
        </template>
        <div style="font-size: 16px;padding: 0 50px;">{{ detail.liquidatedDamages.ruleText }}</div>
      </el-collapse-item>
    </el-collapse>
    <MmvTitle title="退款信息"></MmvTitle>
    <el-form  label-width="100px" label-position="right" size="small">
      <el-row :gutter="15">
        <el-col :span="6">
          <el-form-item label="订单租金">¥{{ detail.liquidatedDamages.rent }}元</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="已付租金">¥{{ detail.paidRent }}元</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="违约金额">
            <el-input v-model="deductionRent" @keyup.native="deductionRent = oninput(deductionRent,2)" :disabled="detail.liquidatedDamages.rent==0"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="应退租金" style="font-size: 16px;">¥{{ rentToBeRefunded }}元</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15" v-if="detail.deposit">
        <el-col :span="8">
          <el-form-item label="支付押金">¥{{ detail.deposit }}元</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支付方式">{{ detail.depositPayType==1?"线上":"线下" }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="应退押金">¥{{ detail.deposit }}元</el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!--    <br>-->
    <!--    <MmvTitle title="退款凭证"></MmvTitle>-->
    <!--    <el-form label-width="100">-->
    <!--      <el-row :gutter="15">-->
    <!--        <el-col :span="24">-->
    <!--          <el-form-item label="支付凭证">-->
    <!--            <ImageUpload v-model="url" :limit="1" />-->
    <!--          </el-form-item>-->
    <!--        </el-col>-->
    <!--      </el-row>-->
    <!--    </el-form>-->
    <div slot="footer" class="dialog-footer" style="text-align: end;">
      <el-button @click="closeDiolog">取消</el-button>
      <el-button type="primary" :loading="submitBtnLoading" @click="submitData">确定</el-button>
    </div>
  </div>
</template>

<script>
import {
  cancelDetail,
  cancelAndRefund
} from '@/api/order/index';
import MmvTitle from '@/components/MmvUI/MmvTitle.vue';
import * as api from "@/api/order/voucher";
import CustomContent from "@/components/custom/content";
import MemberDetail from "@/views/components/memberDetail";

export default {
  components: {
    MmvTitle,
    MemberDetail
  },
  dicts: ['sys_pay_type', 'order_payStatus', 'charge_type', 'refund_type', 'sys_order_status'],
  props: ['orderNo'],
  data() {
    return {
      nowId: null,
      activeNames: ['1','4'],
      detail: {
        chargingItems: [],
        orderInfo: {},
        customerInfo: {},
        liquidatedDamages: {
          rent:0
        },
      },
      deductionRent:0,
      // deductionDeposit:0,
      loading: true,
      btnLoadIng: false,
      url: "", // 支付凭证
      submitBtnLoading: false
    }
  },
  computed: {
    rentToBeRefunded() {
      var r1, r2, m, n;
      try {
        r1 = this.detail.paidRent.toString().split(".")[1].length;
      }
      catch (e) {
        r1 = 0;
      }
      try {
        r2 = this.deductionRent.toString().split(".")[1].length;
      }
      catch (e) {
        r2 = 0;
      }
      m = Math.pow(10, Math.max(r1, r2));
      //last modify by deeka
      //动态控制精度长度
      n = (r1 >= r2) ? r1 : r2;
      let num = (this.detail.paidRent * m - this.deductionRent * m) / m;
      return (num<0?0:num).toFixed(n);
    }
    // depositToBeRefunded() {
    //   return this.detail.liquidatedDamages.deposit-this.deductionDeposit;
    // }
  },
  filters: {
    memberType(val) {
      return {
        1: '企业',
        2: '个人',
      }[Number(val)] || '';
    },
    memberSource(val) {
      return {
        1: '搜索',
        2: '分享',
        3: '扫码',
        4: '手动录入',
      }[Number(val)] || '';
    },
    imageUrl(url) {
      return process.env.VUE_APP_BASE_IMAGE_URL + url
    },
  },
  mounted() {
    this.costDetail();
  },
  methods: {
    closeDiolog() {
      this.$emit('close');
    },
    costDetail() {
      cancelDetail(this.orderNo).then(response => {
        this.detail = response.data || {};
        this.deductionRent=response.data.liquidatedDamages.damages;

        this.detail.customerInfo.labelClassify = response.data.customerInfo.labelClassify.split(',')
        this.loading = false
      });
    },
    submitData() {
      this.submitBtnLoading = true
      cancelAndRefund({
        orderNo:this.orderNo,
        ruleText:this.detail.liquidatedDamages.ruleText,
        deductionRent:this.deductionRent,
        rentToBeRefunded:this.rentToBeRefunded
      }).then(response => {
        this.submitBtnLoading = false
        this.$message.success(response.msg);
        this.closeDiolog();
      }).catch(()=>{
        this.submitBtnLoading = false
      });
      // if (!this.url) {
      //   // this.$message.error("请上传退款凭证");
      //   // return;
      //   cancel(this.orderNo, -1).then(response => {
      //     this.submitBtnLoading = false
      //     this.$message.success(response.msg);
      //     this.closeDiolog();
      //   });
      // } else {
      //   api.addVoucher({
      //     bizType: 8,
      //     bizId: this.orderNo, // 订单编号
      //     url: this.url, // 支付凭证
      //   }).then(res => {
      //     // return;
      //     cancel(this.orderNo, res.data.id).then(response => {
      //       this.submitBtnLoading = false
      //       this.$message.success(response.msg);
      //       this.closeDiolog();
      //     });
      //   });
      // }


    },
    getSummaries(param) {
      const {
        columns,
        data
      } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        if (index === 1) {
          const values = data.map(item => Number(item[column.property]));
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 元';
        }
      });

      return sums;
    },
    objectSpanMethod({
                       row,
                       column,
                       rowIndex,
                       columnIndex
                     }) {
      let rowspan = this.detail.chargingItems.length - 2;
      if (columnIndex === 0 || (columnIndex > 5)) {
        if (rowIndex === 0 && rowIndex < rowspan) {
          return {
            rowspan: rowspan,
            colspan: 1
          };
        } else if (rowIndex > 0 && rowIndex < rowspan) {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }

      // if (columnIndex > 5 && rowIndex >= rowspan) {
      //   if (rowIndex === rowspan) {
      //     return {
      //       rowspan: 2,
      //       colspan: 1
      //     };
      //   } else {
      //     return {
      //       rowspan: 0,
      //       colspan: 0
      //     };
      //   }
      // }

      if (rowIndex >= rowspan) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        } else if (columnIndex === 5) {
          return [1, 4];
        } else if (columnIndex < 5) {
          return [0, 0];
        }
      }
    }

  },

}
</script>
<style scoped>
/deep/ .my-content {
  width: 100px!important;
}
</style>
